<template>
	<view class="home page bgf6">
		
		<scroll-view class="list rel" @scroll="onScroll" @scrolltolower="nextPage" scroll-y
			:style="{height: 'calc(100vh - ' + statusBar + 'px)'}">
			<block v-for="(item,index) in list" :key="index">
				<store-item :item="item.shop" @location="location" @call="call" @detail="detail"></store-item>
			</block>
		</scroll-view>
	
	</view>
</template>

<script>
	import msgPop from '@/components/msg-pop/msg-popup.vue';

	const statusBar = uni.getSystemInfoSync().statusBarHeight + 5;
	export default {
		components: {
			msgPop
		},

		data() {
			return {
				statusBar,
				keyword: '',
				lat: '28.2129183',
				lng: '112.88881136',
				city: '',
				cityList: [],
				banner: [],
				locationCity: '',
				page: 1,
				list: [],
				code: '',
				isLastPage: false,
				isnodata: false,
				orgId: 27,
				scrollIng: false,
				timer: null

			}
		},
		onLoad() {
			uni.setStorageSync("orgId", this.orgId);
			this.getShopList();
		
		},

		onPullDownRefresh() {
			this.isLastPage = false;
			this.isnodata = false;
			this.page = 1;
			this.list = [];
			this.getShopList();
		},




		onShow() {

		},
		onShareAppMessage(res) {
			console.log(res);
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '雀侠智能共享棋牌', //自定义分享标题
				path: '/pages/home/index', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
			}
		},

		onShareTimeline(res) { //分享到朋友圈
			return {
				title: "雀侠智能共享棋牌",
				path: '/pages/home/index', // '/pages/...'分享页面路径（打开分享时进入页），以/开头
			}
		},
		methods: {

			onScroll() {
				// 监听页面的滚动开始和结束
				clearTimeout(this.timer);
				this.timer = null;
				this.scrollIng = true;
				this.timer = setTimeout(() => {
					this.scrollIng = false;
				}, 2000);
			},


			bannerClick() {
				uni.navigateTo({
					url: '../member/join'
				})
			},
			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getShopList();
			},


			selectCity(item) {

				this.$refs.citypicker.close();
				this.city = item;
				this.list = [];
				this.page = 1;
				this.isLastPage = false,
					this.isnodata = false,
					this.getShopList();
			},

			doSearch() {
				console.info("===search====");
				uni.navigateTo({
					url: '../shop/search'
				})
			},

			init() {

				let _this = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						let provider = res.provider;
						uni.setStorageSync("provider", provider)
					},
					fail: function(res) {

					}
				});
				uni.login({
					provider: uni.getStorageSync("provider"),
					success: function(loginRes) {
						console.info(loginRes);
						let code = loginRes.code;
						_this.code = code;
						_this.autoLogin();


					},
					fail: function(res) {

					}
				})
			},

			autoLogin() {
				let that = this;
				let param = {
					code: this.code,
					orgId: this.orgId
				}
				this.$api.autoLogin(param).then(res => {

					if (res.code == 1) {
						uni.setStorageSync("mobile", res.data.mobile);
						uni.setStorageSync("token", res.data.token);
						uni.setStorageSync("avatar", res.data.avatar);
						uni.setStorageSync("username", res.data.username)
					}
					console.info(res);
				})

			},

			location(item) {
				uni.openLocation({
						name: item.name,
						latitude: parseFloat(item.lat),
						longitude: parseFloat(item.lng),
						address: item.address,
						fail: function(res) {
							console.info(JSON.stringify(res))
						}
					},

				)
				console.log("location" + JSON.stringify(item))
			},
			call(item) {

				uni.makePhoneCall({
					phoneNumber: item.tel
				})
				console.log("call" + JSON.stringify(item))

			},
			detail(item) {
				console.log("detail" + JSON.stringify(item))
				uni.navigateTo({
					url: '../shop/detail?id=' + item.id + "&distance=" + item.distance
				})
			},

			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.lat = res.latitude;
						that.lng = res.longitude;
					
						uni.setStorageSync("lat", that.lat);
						uni.setStorageSync("lng", that.lng);
						that.initData();
						that.getShopList();
					},
					fail: function(res) {
						console.info("location  fail" + JSON.stringify(res))
					}
				})
			},

			initData() {

				let that = this;

				let param = {
					lat: this.lat,
					lng: this.lng,
					orgId: uni.getStorageSync("orgId")
				};

				this.$api.getCity(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.city = res.data.cityName;
						that.cityList = res.data.cityList;
						that.locationCity = res.data.cityName;
						that.banner = res.data.banner
					} else {

					}
				})
			},

			getShopList() {

				let that = this;

				var city = "";
				if (this.city == this.locationCity) {
					city = "";
				} else {
					city = this.city;
				}
				let param = {
					lat: this.lat,
					lng: this.lng,
					city: city,
					page: this.page,
					orgId: uni.getStorageSync("orgId")
				};

				this.$api.favShopList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
					
					} else {

					}
				})

			},



			onShowCityPicker() {
				this.$refs.citypicker.open();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		position: relative;
		.bg {
			width: 100%;
			height: 442rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		.rel {
			position: relative;
			z-index: 1;
		}
		.c1a {color: #1a1a1a;}
		.down {
			width: 24rpx;
			height: 16rpx;
		}

		.sear {
			width: 24rpx;
			height: 24rpx;
		}

		.bgImg {
			width: calc(100% - 32rpx);
			height: 300rpx;
			// image {height: 100% !important;}
		}
	}
</style>